<template>
	<view class="container">
		<view class="pageHeader">
			充值
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
			<text class="record" @click="record()">记录</text>
		</view>
		<view class="regoodbox">
			<view class="czfs flex">
				<text>充值方式</text>
				<view style="margin-left: 60upx;flex:1">
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;position: relative;flex:1">
							<image src="../../static/r-1.png" style="width: 34upx;height: 34upx;margin-right: 12upx;"></image>
							<text>微信</text>
							
							<!-- <view style="position:absolute;top:50upx;left: 40upx;font-size: 26upx;">2小时到账</view> -->
						</view>
						<image src="../../static/f-1.png" style="width: 10upx;height: 20upx;"></image>
					</view>
				</view>
			</view>
			<view style="margin-top: 30upx;padding: 0 70upx;">
				<text>充值金额</text>
				<view class="flex aic" style="border-bottom: 2upx solid #EFEFEF;margin-top: 20upx;padding:20upx 0 ;">
					<text style="font-size: 42upx;font-weight: 600;margin-right: 16upx;color: #333;">￥</text>
					<input type="number" v-model="number" placeholder="请填入金额" style="font-size: 30upx;flex:1" />
				</view>
				
				<button @tap="recharge()" class="rebtn">充值</button>
			</view>
		</view>
	</view>
</template>

<script>
	import postAjax from '../../API/postAjax.js'
	export default {
		data() {
			return {
				userToken: '', // token	
				number:'',
				payment:'Weixin' //充值方式
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')

		},
		methods: {
			// 返回上一页
			backpage() {
				
				uni.navigateBack({
					delta: 1
				})
			},
			record(){
				uni.navigateTo({
					url:"record?type=1",
					animationDuration:300
				})
			},
			recharge() {
				let that=this
				
				if(!that.number){
					uni.showToast({title:'请输入充值金额', icon:'none'})	
				}
				console.log(that.userToken)
				
				postAjax('Recharge/UserRecharge',{
					token:that.userToken,
					num:that.number,
					payment:that.payment,
				},function(data){											
					console.log(data)		
										
										
					let obj = data.data
					// 第一种写法，传对象
					let orderInfo = JSON.stringify(obj)	
								
					console.log(orderInfo)
					
					uni.requestPayment({
					    provider: 'wxpay',
					    orderInfo: orderInfo, //微信、支付宝订单数据											
						
					    success: function (res) {					
							
					        uni.showToast({title:'充值成功', icon:'none'})								
														
							setTimeout(function(){
								uni.navigateTo({
									url:'balance'
								})
							}, 2000);
							
					    },																		
					    fail: function (err) {	
							console.log( JSON.stringify(err))
					        uni.showToast({title:'充值失败', icon:'none'})	
					    }
					});
								
				})	
				
			},			

		}
	}
</script>

<style>
	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}
	.record{
		position: absolute;
		right: 20upx;
		font-size: 28upx;
		padding: 0 20upx;
	}
	.pageHeader {
		position: relative;
		height: 64px;
		background-color: #1D84E8;
		line-height: 64px;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 20px;
	}

	.czfs {
		padding: 40upx 40upx 100upx;
		font-size: 30upx;
		color: #333;
		display: flex;
		margin: 40upx 30upx;
		background-color: #EFEFEF;
		border-radius: 5px;
	}
	.rebtn{color: #fff;background:linear-gradient(90deg,rgba(92,171,246,1) 0%,rgba(30,132,232,1) 100%);margin: 256upx auto 0;display:block;font-size: 30upx;border-radius: 4upx;width:456upx;height: 76upx;line-height: 76upx;}
	.rebtn::after{border: none;}
</style>
